@use '@scss/common' as *;
@use '../shared.scss';

.wrap {
  position: relative;
}

.ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 1rem;
}

.layout--vertical {
  :local() {
    .ul {
      flex-direction: column;
    }

    .li {
      gap: 1rem;
    }
  }
}

.li {
  display: flex;
}

.radioWrap {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-grow: 1;
  width: 100%;
  gap: 0.5rem;

  :global {
    input[type='radio'] {
      display: none;
    }
  }
}

.radio {
  @include formInput;
  & {
    width: 1rem;
    height: 1rem;
    position: relative;
    padding: 0;
    display: inline-block;
    border-radius: 100%;
  }

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100%;
    background-color: var(--theme-elevation-800);
    transition:
      width 0.2s ease,
      height 0.2s ease;
    opacity: 0;
  }

  &:hover {
    &::before {
      opacity: 0.2;
    }
  }
}

.hidden {
  display: none;
}

.selected {
  &::before {
    opacity: 1 !important;
  }
}

.label {
  flex-grow: 1;
  width: 100%;
}
